<template>
	<view class="page must_know" :style="{'min-height':h+'px'}">
		<c-nav-bar :title="title" leftIconColor="#fff" :titleStyle="titleStyle" bgColor="transparent"></c-nav-bar>
		<u-swiper :list="fmtlist" @change="e => currentNum = e.current" :autoplay="false" indicatorStyle="right: 20px"
			height='610rpx' imgMode="scaleToFill">
		</u-swiper>
		<view class="basicInfo" v-if="detailsList">
			<view class="name">{{detailsList.name}}</view>
			<view class="time" style="margin: 31rpx 0 19rpx;">
				<view class="bi_rj">人均 ￥{{detailsList.personPrice}}/人</view>
				<view class="bi_pf">
					<u-rate :count="count" size='28rpx' v-model="detailsList.score||5" allowHalf='true'
						activeColor='#ff8f23' readonly></u-rate>
					<view class="fenshu">
						{{detailsList.score||5}}分
					</view>
				</view>
			</view>
			<view class="bottomnews">
				<view class="val1">
					营业中
				</view>
				<view class="val2">
					{{detailsList.openDate}}
				</view>
				<image @tap="phone" src="https://i.ringzle.com/file/20240326/23b95925ca924b6bacb8d9e7327dece5.png">
				</image>
			</view>
			<view class="bottomnews" v-if="CheckList&&CheckList.length>0">
				<view class="danting" v-for="(item,index) in CheckList" :key="index">
					<view class="danting2">
						{{item}}
					</view>
				</view>
			</view>

			<view class="bottomdizhi">
				<view class="bottomdizhi1">
					<view class="caiyuan1">
						{{detailsList.islandName}}
					</view>
					<view class="caiyuan2">
						{{detailsList.areaDetail||''}}
					</view>
				</view>
				<view class="bottomdizhi2" @tap="navigation">
					<view class="daohang1">
						<u--image src="https://i.ringzle.com/file/20240313/b1f07e45f41a476aa48a4dee89e95721.png"
							width="34rpx" height="46rpx"></u--image>
					</view>
					<view class="daohang2">
						导航
					</view>
				</view>
			</view>
		</view>
		<!-- 超值优惠 -->

		<view class="chaozhi" v-if="detailsList">
			<view class="titles">
				超值优惠
			</view>
			<view class="taocan" v-for="(item1,index1) in detailsList.products" :key="index1">
				<view class="taocan1">
					<!-- <u--image :src="item1.coverImg" width="224rpx" height="168rpx" ></u--image> -->
					<image :src="item1.coverImgList[0]" mode="scaleToFill"></image>

				</view>
				<view class="taocan2">
					<view class="youhuitaocan1" @click="chaoshitaocan(item1)">
						<view class="cjtc1">
							{{item1.name}}
						</view>
						<view class="cjtc2" style="margin-top: 6rpx;">
							<u-icon name="arrow-right" color='#AAAAAA'></u-icon>
						</view>
					</view>
					<view class="youhuitaocan2">
						{{item1.refundRemark}}
					</view>
					<view class="youhuitaocan3">
						<view class="qianggou1">
							<span>￥</span> {{item1.discountPrice}} <span
								style="text-decoration: line-through;color: #999;font-size: 20rpx">￥{{item1.price}}</span><del></del>
						</view>
						<view class="qianggou2" @click="qianggoucaip(item1)">
							抢购
						</view>
					</view>
				</view>
			</view>


		</view>

		<!-- 推荐菜品 -->
		<view class="content" v-if="detailsList">
			<view class="feature-three">
				<span class="left">推荐菜品</span>
				<span @click="navTabList" class="right">全部 <u-icon name="arrow-right" color='#AAAAAA'></u-icon></span>
			</view>

			<view class="category-main">
				<view v-for="item,index in tuijianlist" class="category-main-container" :key='item.name'
					@click="goryclick(item)">
					<view class="card-image">
						<image :src="item.coverImage" mode="widthFix"></image>
						<text style="margin: 30rpx 0;">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 评价 -->
		<view class="chaozhi" style="margin-top: 10rpx;" v-if="detailsList">
			<view class="feature-three">
				<span class="left">客户评价</span>
				<span @click="seeall" class="rightpj">查看全部{{pltotle}}条 <u-icon name="arrow-right"
						color='#AAAAAA'></u-icon></span>
			</view>
			<!-- <view class="huanjing">
				<view class="huanjingxq">
					环境好(13)
				</view>
				<view class="huanjingxq">
					干净卫生(45)
				</view>
				<view class="huanjingxq">
					服务热心(29)
				</view>
			</view> -->
			<view class="pingjialist" v-if="allpllist.length>0">
				<view class="pjxq" v-for="(item,index) in allpllist" :key="index">
					<view class="pjrenyuan1">
						<view class="touxiang1">
							<u--image shape="circle" :src="item.userLogo" width="64rpx" height="64rpx"></u--image>
						</view>
						<view class="touxiang2">
							<view class="pjtime1">
								<view class="pjtime2">
									{{item.userName}}
								</view>
								<view class="pjtime3">
									<u-rate count="5" size='24rpx' v-model="item.score" allowHalf='true'
										activeColor='#ff8f23' readonly></u-rate>
								</view>
							</view>
							<view class="pjtime4">
								{{item.createDate}}
							</view>
						</view>
					</view>
					<view class="pjrenyuan2">
						{{item.comment}}
					</view>
					<view class="pjrenyuan3" v-if="item.imgUrl">
						<u-album multipleSize='220' maxCount='3' :urls="item.imgUrl.split(',')"></u-album>
					</view>
				</view>


			</view>
		</view>
		<!-- 全部评价 -->
		<!-- <view class="featureplthree" @click="seeall">
			<span class="rightpj">查看全部{{pltotle}}条 <u-icon name="arrow-right" color='#007A69'></u-icon></span>
		</view> -->
		<view class="chaozhi" style="margin-top: 20rpx;" v-if="detailsList">
			<view class="feature-three">
				<span class="left">商户信息</span>
				<span @click="toSHInfo" class="rightpj">查看<u-icon name="arrow-right" color='#AAAAAA'></u-icon></span>
			</view>
		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import login from '../../../utils/login';
	export default {
		data() {
			return {
				title: '餐饮美食',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					color: 'transparent'
				},
				currentNum: null,
				tuijianlist: [],
				allcaiplist: [],
				fmtlist: ['https://fsy.shengsi.gov.cn/file/20240730/9bc1732eadc94cbc8a562ae62997f79b.png'],
				tickets: [1, 2, 3],
				fyInd: 0,
				id: 0,
				count: 5,
				num: 4,
				CheckList: [],
				detailsList: '',
				allpllist: [],
				pltotle: 0,
				objList: {},
				tizhi: {},
				tjcpId: ''
			}
		},

		async onLoad(option) {
			let foodType = await this.getIndustryCategory();
			let provideService = await this.getOtherGns();
			if (option.caipid) {
				let postdata = {
					limit: 5,
					page: 1,
					orderField: '', //（排序字段）
					isMapId: option.caipid, //（搜索框名称）
					areaCode: '', //（区域编码）
					type: '', //（菜品类型）
				}
				if (option.msType && option.msType == 'home') {
					delete postdata.isMapId;
					postdata.merchantId = option.caipid;
				}

				this.$api.get('/api/merchant/food/page', postdata)
					.then(res => {
						if (res.data.data.list.length == 0) {
							this.detailsList = [];
							this.$refs.uToast.show({
								type: 'success',
								title: '',
								message: "请联系管理员在地图数据里添加数据",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
							})
							// 在1000毫秒后输出"Hello World!"
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 2000);

						} else {
							this.detailsList = res.data.data.list[0];
							let _t = foodType.find(f => f.dictValue == this.detailsList.foodType);
							this.detailsList.foodTypeName = _t ? _t.dictLabel : ''

							let provideServiceList = this.detailsList.provideService.split(',');
							provideServiceList.length > 0 && provideServiceList.forEach(p => {
								let _t = provideService.find(ps => ps.dictValue == p)
								this.CheckList.push(_t ? _t.dictLabel : '');
							})

							let tempsfp = this.detailsList.storeFrontPic.split(',');
							this.fmtlist = tempsfp;
							this.pinglun();
							this.ditu();
							this.tjcpId = this.detailsList.id;
							this.getList(this.detailsList.id);
						}
					})

			}
			// else if (option.portid) {
			// 	this.getList(option.portid)
			// 	return
			// }
			else {
				this.detailsList = JSON.parse(decodeURIComponent(option.list))
				// this.detailsList.latitude = this.detailsList.latitude
				// this.detailsList.longitude = this.detailsList.longitude
				// 	this.objList = JSON.parse(uni.getStorageSync('userInfo'));
				// 	this.headUrl = this.objList.headUrl
				// 	this.realName = this.objList.realName
				// this.CheckList = JSON.parse(this.detailsList.provideService)

				let _t = foodType.find(f => f.dictValue == this.detailsList.foodType);
				this.detailsList.foodTypeName = _t ? _t.dictLabel : ''
				let provideServiceList = this.detailsList.provideService.split(',');
				provideServiceList.length > 0 && provideServiceList.forEach(p => {
					let _t = provideService.find(ps => ps.dictValue == p)
					this.CheckList.push(_t ? _t.dictLabel : '');
				})

				let tempsf = this.detailsList.storeFrontPic.split(',');
				this.fmtlist = tempsf;
				this.pinglun();
				this.ditu();

				this.tjcpId = this.detailsList.id;
				this.getList(this.detailsList.id)
				//this.getListId(JSON.parse(option.list).id)
			}

			this.detailsList && this.detailsList.products && this.detailsList.products.length && this.detailsList.products.forEach(p => {
				p.coverImgFirst = p.coverImg.split(',')[0];
			})
		},
		methods: {
			getIndustryCategory() {
				return new Promise((resolve, reject) => {
					this.$api.post('/api/dict/getListByTypes', ['food_type']).then(res => {
						let temp = [];
						if (res.data.code === 0) {
							temp = res.data.data;
							resolve(temp);
						} else reject(temp);
					})
				})
			},
			getOtherGns() {
				return new Promise((resolve, reject) => {
					this.$api.post('/api/dict/getListByTypes', ['merchant_provide_service']).then(res => {
						let temp = [];
						if (res.data.code === 0) {
							temp = res.data.data;
							resolve(temp)
						} else reject(temp);
					})
				})
			},
			navigation() {
				uni.openLocation({
					latitude: Number(this.tizhi.latitude),
					longitude: Number(this.tizhi.longitude),
					name: this.detailsList.areaDetail,
				});
			},
			ditu() {
				this.$api.get('/api/merchant/food/map/' + this.detailsList.isMapId)
					.then(res => {
						this.tizhi = res.data.data;
					})
			},
			pinglun() {
				this.$api.get('/api/merchant/food/merchantPage', {
					limit: 3,
					page: 1,
					guideId: this.detailsList.id,
				}).then(res => {
					if (res.data.code === 0) {
						this.allpllist = res.data.data.list;
						this.pltotle = res.data.data.total;
					} else this.$showModal(res.data.msg)
				})
			},

			// 联系商家
			phone() {
				uni.makePhoneCall({
					phoneNumber: this.detailsList.phone //仅为示例
				});
			},
			// 监督电话
			phoneed() {
				uni.makePhoneCall({
					// phoneNumber: this.detailsList.linkPhone //仅为示例
					phoneNumber: '0580-5596306'

				});
			},
			seeall(e) {
				uni.navigateTo({
					url: '/pagesTrip/fineFood/fineFood/evaluatelist?list=' + e + '&guideId=' + this.detailsList.id
				})
			},
			toSHInfo() {
				uni.navigateTo({
					url: '/pagesTrip/fineFood/details/storeInfo?item=' + encodeURIComponent(JSON.stringify(this
						.detailsList))
				})
			},
			// 导航
			goLocation() {
				let lat = this.detailsList.latitude
				let lon = this.detailsList.longitude
				// uni.navigateTo({
				// 	url: '/pages/touristMap/Navigationmap?lat=' + lat + '&lon=' + lon
				// })
				uni.openLocation({
					latitude: Number(this.detailsList.latitude),
					longitude: Number(this.detailsList.longitude),
					name: this.detailsList.name,
				});

			},
			chaoshitaocan(e) {

				uni.navigateTo({
					url: '/pagesTrip/fineFood/fineFood/setmeal?list=' + JSON.stringify({
							...e
						}) + '&msflName=' + this.detailsList.foodTypename + '&xzName=' + this.detailsList
						.islandName
				})
			},
			qianggoucaip(e) {
				uni.navigateTo({
					url: '/pagesTrip/fineFood/fineFood/orderforgoods?list=' + JSON.stringify({
						...e
					})
				})
			},

			// 菜品
			goryclick(item) {},
			// 获取详情数据
			getList(foodId) {
				this.$api.get(`/api/isFood/isfoodsuggest/${foodId}`).then(res => {
					this.allcaiplist = res.data.data;

					this.tuijianlist = res.data.data.slice(0, 3);
				})
			},
			navTabList() {
				uni.navigateTo({
					url: '/pagesTrip/fineFood/details/tjcpAll?foodId=' + this.tjcpId
				})
			},
			// 获取详情数据
			getListId(Id) {
				this.$api.get(`/api/isFood/${Id}`).then(res => {
					this.detailsList = res.data.data;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: 98rpx;
		box-sizing: border-box;
	}

	.featureplthree {
		margin: 0 auto 170rpx auto;
		width: 702rpx;
		height: 72rpx;
		background: #F0F8F6;
		display: flex;
		justify-content: center;
		align-items: center;

		.rightpj {
			height: 72rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #AAAAAA;
			line-height: 72rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.pjrenyuan3 {
		width: 702rpx;
		margin-top: 20rpx;
	}

	::v-deep .u-album__row {
		&>view {
			width: calc(100% / 3 - 11rpx) !important;
			margin: 0 !important;
			margin-left: 15rpx !important;

			&:first-child {
				margin-left: 0 !important;
			}
		}
	}

	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}

	.pjrenyuan2 {
		width: 100%;
		min-height: 48rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	::v-deep .u-album__row__wrapper {
		image {
			border-radius: 12rpx !important;
		}
	}

	.pjxq {
		// margin-bottom: 30rpx;
		margin-bottom: 40rpx;

		.pjrenyuan1 {
			display: flex;
			width: 100%;
			height: 64rpx;
			margin-bottom: 32rpx;

			.touxiang1 {
				width: 64rpx;
				height: 64rpx;
			}

			.touxiang2 {
				flex-grow: 1;
				height: 64rpx;
				display: flex;
				flex-direction: column;
				margin-left: 10rpx;

				.pjtime1 {
					display: flex;
					align-items: center;
					height: 32rpx;

					.pjtime2 {
						height: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #2C2C2C;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
						padding-right: 20rpx;
					}

					.pjtime3 {}
				}

				.pjtime4 {
					height: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #777777;
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
					margin-top: 10rpx;
				}
			}

		}

	}

	.pingjialist {
		width: 702rpx;
		min-height: 80rpx;
	}

	.huanjing {
		width: 702rpx;
		min-height: 80rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;

		.huanjingxq {
			height: 60rpx;
			background: #F4F5F7;
			border-radius: 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 60rpx;
			text-align: center;
			font-style: normal;
			padding: 0 30rpx;
			margin-bottom: 10rpx;
		}
	}

	.feature-three {
		padding: 0 0 40rpx 0;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			font-size: 36rpx;
			font-weight: 600;
			color: #111;
		}

		.right {
			color: #AAAAAA;
			font-size: 24rpx;
			display: flex;
			align-items: center;
		}

		.rightpj {
			color: #AAAAAA;
			font-size: 24rpx;
			display: flex;
			align-items: center;
		}
	}

	.taocan {
		width: 100%;
		height: 168rpx;
		display: flex;
		margin-bottom: 30rpx;

		.taocan1 {
			width: 168rpx;
			height: 168rpx;
			border-radius: 16rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}

		}

		.taocan2 {
			width: calc(100% - 224rpx);
			height: 168rpx;
			flex-grow: 1;
			display: flex;
			flex-direction: column;

			.youhuitaocan1 {
				display: flex;
				align-items: center;

				.cjtc1 {
					height: 40rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					padding-left: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.cjtc2 {
					margin-top: 4rpx;
				}
			}

			.youhuitaocan2 {
				height: 68px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #777777;
				line-height: 68rpx;
				text-align: left;
				font-style: normal;
				padding-left: 20rpx;
			}

			.youhuitaocan3 {
				display: flex;
				justify-content: space-between;
				height: 60rpx;

				.qianggou2 {
					width: 119rpx;
					height: 58rpx;
					background: #007A69;
					border-radius: 44rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 58rpx;
					text-align: center;
					font-style: normal;
				}

				.qianggou1 {
					height: 40rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 40rpx;
					color: #FF3E3E;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;

					span {
						height: 33rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FF3E3E;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;
						padding-left: 20rpx;
					}
				}
			}
		}
	}

	.chaozhi {
		width: 702rpx;
		margin: 0 auto;

		.titles {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
			padding-bottom: 30rpx;
		}



	}

	.bottomdizhi {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 0 10rpx 0;
		height: 128rpx;
		background: #F0F8F6;
		border-radius: 24rpx;

		.bottomdizhi2 {
			height: 128rpx;
			width: 213rpx;
			background-image: url("https://i.ringzle.com/file/20240313/d1f3ec4adc16475d9be95db80ddd920c.png");
			background-repeat: no-repeat;
			/* 不重复 */
			background-position: center center;
			/* 居中 */
			background-size: cover;
			/* 覆盖整个元素 */
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.daohang2 {
				width: 44rpx;
				height: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #007A69;
				line-height: 30rpx;
				text-align: center;
				font-style: normal;
			}
		}

		.bottomdizhi1 {
			flex-grow: 1;
			height: 128rpx;
			align-items: center;
			width: calc(100% - 213rpx);

			.caiyuan1 {
				height: 60rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #000000;
				line-height: 70rpx;
				text-align: left;
				font-style: normal;
				padding-left: 20rpx;
			}

			.caiyuan2 {
				height: 68rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 50rpx;
				text-align: left;
				font-style: normal;
				padding-left: 20rpx;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				box-sizing: border-box;
			}
		}
	}

	.danting {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		margin-left: 10rpx;

		&:first-child {
			margin-left: 0;
		}

		.danting2 {
			border-radius: 6rpx;
			border: 1rpx solid #DCC7AB;
			padding: 7rpx 8rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #C9A771;
			line-height: 22rpx;
		}
	}

	.bottomnews {
		display: flex;
		margin: 20rpx 0 15rpx;
		position: relative;

		image {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			right: 0;
			bottom: 14rpx;
		}

		.val2 {
			height: 36rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #111111;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			padding-left: 20rpx;
		}

		.val1 {
			height: 36rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #06B86F;
			line-height: 36rpx;
			text-align: justify;
			font-style: normal;

		}
	}

	.fenshu {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #FEA400;
		text-align: left;
		font-style: normal;
		padding-left: 5rpx;
	}

	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		background-color: #ffffff;

	}

	.currentNum {
		padding: 4rpx 16rpx;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 16rpx;
		width: fit-content;
		@include flex;
		justify-content: center;
		color: #FFFFFF;
	}


	.basicInfo {
		padding: 40rpx 24rpx 20rpx;
		border-radius: 24rpx 24rpx 0 0;
		background-color: #fff;
		margin-top: -30rpx;
		width: 100%;
		box-sizing: border-box;
		position: relative;

		.name {
			font-size: 40rpx;
			color: #1C1E41;
			font-weight: Bold;
		}

		.time {
			display: flex;
			align-items: center;

			.bi_rj {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #111111;
				line-height: 28rpx;
			}

			.bi_pf {
				margin-left: 10rpx;
				display: flex;
				align-items: center;
			}
		}
	}


	.bottom {
		display: flex;
		justify-content: space-between;

	}

	.location-right {
		width: 142rpx;
		height: 64rpx;
		line-height: 64rpx;
		/* 自定义线性渐变，从左上到右下，同时包含多个颜色 */
		// background: linear-gradient(to right, #0EBFFE, #00D3E8);
		background-color: #007A69;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		border-radius: 50rpx;

		.icons {
			padding-top: 20rpx;
			padding-left: 26rpx;
		}


	}

	.category-main {
		// margin-top: 10rpx;
		// width: 702rpx;
		// height: 150rpx;
		background: #ffffff;
		border-radius: 16rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		.card-image {
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 224rpx;
			height: 266rpx;
			margin: 8rpx 7rpx;
			background-color: #fff;
			// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

			image {
				width: 224rpx;
				height: 168rpx;
				border-radius: 16rpx;
			}
		}

		.category-main-container image {
			width: 224rpx;
			height: 168rpx;
		}

		.category-main-container text {
			margin-top: 5rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}


	.content {
		padding: 16rpx;
		box-sizing: border-box;



		.title {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
			padding: 16rpx 0;
		}


	}

	.pot-btn {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		box-sizing: border-box;
		height: 140rpx;
		align-items: center;
		text-align: center;
		background-color: #fff;
		justify-content: space-between;
		padding: 16rpx 24rpx 36rpx;

		.left {
			text-align: center;
		}

		.right {
			width: 506rpx;
			height: 88rpx;
			line-height: 88rpx;
			/* 自定义线性渐变，从左上到右下，同时包含多个颜色 */
			// background: linear-gradient(to right, #0EBFFE, #00D3E8);
			background-color: #007A69;
			font-size: 31rpx;
			color: #FFFFFF;
			text-align: center;
			border-radius: 50rpx;
		}
	}
</style>